<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>NASA</title>
		<link rel="stylesheet" href="css/index.css">
		<link rel="icon" href="favicon.ico">
	</head>
	<body>
		<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"
		src="八木海莉 - Sing My Pleasure.mp3">
	  
</audio>
		<!-- 头部信息 -->
		<div id="head">
			<div id="headMain" class="cf">
				<!-- LOGO图片 -->
				<img src="images/nasa-logo.svg">
				<!-- 头部搜索框 -->
				<form action="" class="fr input">
					<input type="text" id="input" placeholder="Search">
					<span class="iconfont" id="glass">&#xe662;</span>
					<span class="iconfont" id="share">&#xe63c;</span>
				</form>
				<!-- 头部上面的导航栏 -->
				<ul class="navTop fr">
					<li class="navTopMore">
						<a href="#">Missions</a>
					</li>
					<li class="navTopMore">
						<a href="#">Galleries</a>
						<!-- 上面导航栏里面的子导航 -->
						
					</li>
					<li><a href="#">NASA TV</a></li>
					<li class="navTopMore">
						<a href="#">Follow NASA</a>
						<!-- 上面导航栏里面的子导航 -->
						
					</li>
					<li class="navTopMore">
						<a href="#">Dowmloads</a>
						<!-- 上面导航栏里面的子导航 -->
						
					</li>
					<li class="navTopMore">
						<a href="#">About</a>
						<!-- 上面导航栏里面的子导航 -->
							
					</li>
					<li class="navTopMore">
						<a href="#" class="last">NASA Audiences</a>
						<!-- 上面导航栏里面的子导航 -->
						
					</li>
				</ul class="navTopMore">
				
				<!-- 头部下面的导航栏 -->
				<ul class="navBottom cf">
					<li><a href="#">Human in Spaces</a></li>
					<li><a href="#">Moon to Mars</a></li>
					<li><a href="#">Earth</a></li>
					<li><a href="#">Space Tech</a></li>
					<li><a href="#">Flight</a></li>
					<li><a href="#">Solar System and Beyond</a></li>
					<li><a href="#">STEM Engagement</a></li>
					<li><a href="#">History</a></li>
					<li><a href="#">Benefits to You</a></li>
				</ul>
			</div>
		</div>
		<!-- 主体的上面 -->
		<div id="main" class="cf">
			<a href="#" class="left">
				<p class="imgbtmt ibt">Dawn</p>
				<p class="imgbtmo ibo">Dusk for Dawn:Mission of Many First to Gather More Data in Home Stretch</p>
			</a>
			<a href="#" class="rightTopl">
				<p class="imgbtmth ibt">Climate</p>
				<p class="imgbtmf ibo">A Scienstist's Final Paper Looks Toward Earth's Future Climate</p>
			</a>
			<div class="rightTopr">
				<h4>NASA Events</h4>
				<p><a href="#">Calling All Social Media Users!Apply to Experience the Launch of NASA's ICESat-2</a></p>
				<p><a href="#">No Earlier Than Saturday Aug.4,4 a.m. EDT:Launch of Parker Solar Probe from Cape Canaver Air Force Station in Florida</a></p>
				<p class="rightTopr-btm"><a href="#">NASA TV Schedule</a><a href="#">Launches and Landings</a></p>
			</div>
			<a href="#" class="rightBottom">
				<p class="imgbtmo ibo">July 16,1969:Liffoff of Apollo 11</p>
			</a>
		</div>
		<!-- 主体的中间 -->
		<div id="home">
			<div class="ihome">
				<p class="Himgbtmy ibt"><a href="#">Image of the Day</a></p>
				<p class="Himgbtmo ibo"><a href="#">A Mergers of Stars</a></p>
			</div>
			<div class="ihome">
				<p class="Himgbtmy ibt"><a href="#">Asteroids</a></p>
				<p class="Himgbtmt ibo"><a href="#">Observatories Team Up to Reveal Rare Double Asteroid</a></p>
			</div>
			<!-- 嵌入视频 -->
			<div class="ihome" > 
				<video width=320; height=300 src="八木海莉 - Sing My Pleasure.mp4" controls>
				
				  </video>
			</div>
		</div>
		<!-- 主体的底部 -->
		<div id="bottom">
			<div class="ibtm">
				<p class="Himgbtmy ibt" id="twolines1"><a href="#">About NASA</a></p>
				<p class="Himgbtmo ibo"><a href="#">NASA Statement on Nomination for Agency Deputy Administrator</a></p>
			</div>
			<div class="ibtm">
				<p class="Himgbtmy ibt" id="threelines1"><a href="#">Juno</a></p>
				<p class="Himgbtmo ibo"><a href="#">NASA Juno Data Indicate Another Possible Volcano on Jupiter Moon Io</a></p>
			</div>
			<div class="ibtm">
				<p class="Himgbtmy ibt" id="twolines2"><a href="#">Cassine</a></p>
				<p class="Himgbtmo ibo"><a href="#">NASA's Cassine Coverage Lands an Emmy Nomination</a></p>
			</div>
			<div class="ibtm">
				<p class="Himgbtmy ibt" id="threelines2"><a href="#">Fermi Space Telescope</a></p>
				<p class="Himgbtmo ibo"><a href="#">NASA's Fermi Traces Source of Cosmic Neutrion to Moster Black Hole</a></p>
			</div>
		</div>
		<!-- 底部更多 -->
		<div id="more">
			<a href="#" class="morebtm">MORE STORIES</a>
		</div>
		<!-- 底部信息 -->
		<div id="foot" class="cf">
			<div class="ffleft">
				<a href="#"><img src="images/nasa-logo.svg" alt=""></a>
				<p class="ftext">National Aeronautics and Space Administration</p>
				<p class="ftext">NASA Official: Brian Dunbar</p>
			</div>
			<ul class="fright">
				<li><a href="#">No Fear Act</a></li>
				<li><a href="#">FOIA</a></li>
				<li><a href="#">Privacy</a></li>
				<li><a href="#">Office of Inspector General</a></li>
				<li><a href="#">Office of Special Counsel</a></li>
				<li><a href="#">Agency Financial Reports</a></li>
				<li><a href="#">Contact NASA</a></li>
			</ul>
		</div>
	</body>
</html>
